<template>
	<view class="home">
		<div class="init">
			<image src="https://www.xiaouhegongyi.cn/logo.png" mode=""></image>

			<div class="bb" @click="GetOpen()">
				获取资料并登录
			</div>
		</div>
		<uni-popup ref="popup" :type="type" :animation="true" :maskClick="true" @change="change"
			style="padding-bottom: 0px;">
			<view class="popup">
				<view class="tt">获取您的微信昵称、头像</view>
				<view class="label">
					<button open-type="chooseAvatar" @chooseavatar="chooseavatar">
						<div class="css">
							<view class="tit">
								头像
							</view>
							<view class="img">
								<image :src="avatarUrl" mode=""></image>
							</view>

						</div>

					</button>
				</view>
				<view class="label">
					<view class="tit">
						昵称
					</view>
					<view class="input">
						<input id="nickname-input" v-model="nickname" class="authorization white" type="nickname"
							placeholder="请输入用户昵称">
					</view>
				</view>
				<view class="label">
					<view class="tit">
						手机号
					</view>
					<view class="input">
						<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
							<input v-model="tel" placeholder="请输入手机号">
						</button>
					</view>
				</view>
				<div class="button" @click="GetUserInfo();">
					授权登录
				</div>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		request
	} from "@/request/index.js"
	import regeneratorRuntime from '@/lib/runtime/runtime'
	import {
		login
	} from "@/utils/asyncWx.js"
	export default {
		data() {
			return {
				code: "",
				tel: "",
				nickname: "夏耦合用户",
				avatarUrl: "https://www.xiaouhegongyi.cn/logo.png",
				img: "",
				type: "bottom",
				openid: ""
			}
		},
		onLoad() {

			this.GetLogin()
			this.toggle();
			this.initUserInfo()
		},

		methods: {
			// 获取用户信息
			async initUserInfo() {
			
				var res = await request({
					url: "GetUserInfo"
				})
				console.log(res);
				if (res.code == 0) {
			
					this.user = res.data
					this.username = res.data.username
					this.avatarUrl = res.data.avatarUrl
					this.tel = res.data.mobile
					this.nickname = res.data.nickname
				}
			
			},
			// 获取手机号
			async getPhoneNumber(e) {
				let res = await request({
					url: 'GetPhone',
					data: {
						code: e.detail.code
					}
				})
				if (res.code == 0) {
					this.tel = res.data
				}
			},

			async GetLogin() {
				var code_res = await login()
				if (code_res.errMsg == "login:ok") {
					uni.showLoading({
						title: '加载中',
						mask: true
					})
					var res = await request({
						url: 'wxlogin',
						data: {
							code: code_res.code
						}
					})
					if (res.code == 0) {
						this.openid = JSON.parse(res.data).openid;
						this.toggle();

					}

					uni.hideLoading()


				}
				// console.log(code)

			},


			GetOpen() {
				this.toggle();
				// this.GetWxInfo()
			},
			toggle() {

				this.$refs['popup'].open();
			},
			change(e) {

			},
			async GetUserInfo() {

				let that = this
				if (that.tel == "") {
					uni.showToast({
						title:"请获取手机号",
						icon:"none"
					})
					return
				}


				uni.createSelectorQuery().in(this).select("#nickname-input").fields({
					properties: ["value"],
				}).exec((res) => {
					console.log(res[0]);
					that.nickname = res[0].value;
					this.deuser()
				})

			},
			async deuser() {
				uni.showLoading({
					title: '加载中'
				});
				let that = this
				var data = {};
				data.openid = that.openid
				data.mobile = that.tel
				data.avatarUrl = that.avatarUrl
				data.code = that.code
				data.nickname = that.nickname

				var res = await request({
					url: 'UpdateMember',
					data
				})

				if (res.code == 0) {
					uni.hideLoading()
					uni.switchTab({
						url: "/pages/index/index"
					})
				} else {
					uni.hideLoading()
					uni.showToast({
						title: res.msg
					})
				}
			},
			chooseavatar(e) {
				this.img = e.detail.avatarUrl
				uni.uploadFile({
					url: this.lmurl + 'UploadImg',
					filePath: this.img,
					name: 'file',
					formData: {
						'user': 'test'
					},
					success: (res) => {
						let res1 = JSON.parse(res.data)
						this.avatarUrl = res1.data.path
					}
				});

			},

		}
	}
</script>

<style>
	.init {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-top: 60rpx;
	}

	.init image {
		width: 300rpx;
		height: 300rpx;
		margin: 0 auto;
	}

	.init .bb {
		margin: 60rpx auto;
		padding: 0 30rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 15rpx;
		text-align: center;
		background-color: #0DC06E;
		margin-bottom: 0;
		font-size: 28rpx;
		color: #ffffff;
	}

	button::after {
		border: none;
		background-color: none;
	}

	button {

		margin-left: auto;
		margin-right: auto;
		padding-left: 0rpx;
		padding-right: 0rpx;
		box-sizing: border-box;

		text-align: left;
		text-decoration: none;
		font-size: 28rpx;
		line-height: 1.35;

		color: #000000;
		background-color: #fff;

	}

	.popup {
		width: 100%;
		height: 500rrpx;

		padding: 5%;

		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;

	}

	.popup .tt {
		height: 80rpx;
		line-height: 80rpx;
		font-size: 32rpx;
		font-weight: 700;
		margin-bottom: 20rpx;
	}

	.popup .label {
		width: 100%;
		display: flex;
		height: 100rpx;
		align-items: center;
		border-bottom: 2rpx solid #eee;
	}

	.popup .label button {
		width: 100% !important;
		height: 80rpx !important;

	}

	.popup .label button .css {

		display: flex !important;
		align-items: center !important;
		position: relative;
	}

	.popup .label .tit {
		width: 16% !important;
		font-size: 28rpx;
		margin-right: 10rpx;
		text-align: center;
	}

	.popup .label .img {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		overflow: hidden;
	}

	.input {
		height: 80rpx;
	}

	.popup .label .img image {
		width: 80rpx;
		height: 80rpx;
	}

	.popup .label input {
		width: 100%;
		height: 100%;
		background-color: #fff;

	}

	.popup .zuo {
		width: 14rpx;
		height: 25rpx;
		position: absolute;
		right: 0;
	}

	.popup .button {
		margin: 60rpx auto;
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 15rpx;
		text-align: center;
		background-color: #0DC06E;
		margin-bottom: 0;
		color: #ffffff;
	}
</style>